import apiTool, {
  getSize,
  getUserInfoUrl,
  getUserTypeValue,
  isDh,
  phoneClick,
} from "@/command/apiTool";
import { defineComponent, reactive } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import ListView from "@/components/ListView";
import IconText from "@/components/IconText";
import FilterMenu from "@/components/FilterMenu";
import {
  IFilterMenuChoose,
  IFilterMenuPropsData,
} from "@/components/FilterMenu/types";
import TextGroups from "@/components/TextGroups";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import Search from "@/components/Search";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import ButtonView from "@/components/ButtonView";
import Text from "@/components/Text";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  setup(props, {}) {
    const data: IFilterMenuChoose[] = [
      { type: "area", key: "countryCode" },
      { type: "agriculturalType", key: "categoryId", title: "农资品类" },
      { type: "datePicker", key: "time", title: "日期" },
    ];
    const form = reactive({});
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: isDh() ? "联系TA" : "联系大户",
          type: "primary",
          color: "linear-gradient(90deg, #1989FA 0%, #73B9FF 100%)",
          onClick: () => {
            phoneClick(e.phone);
          },
        },
      ];
      const data = [
        {
          display: isDh(),
          name: "代购农资",
          value: e.productionName,
          width: "40%",
        },
        {
          display: true,
          name: "代购数量",
          value: e.quantity,
          width: "40%",
        },
      ].filter((e) => e.display);
      return (
        <div class="flex flex-col mt-[14px] w-full">
          <RoundInfo
            // right={() => <Text>日期: {e.date}</Text>}
            src={isDh() ? e.headPath : ""}
            title={isDh() ? e.applyName : `代购农资: ${e.productionName}`}
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>日期：{e.time}</TextView>
              </RowView>
              <ButtonGroupView
                data={buttons}
                class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
              />
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render1 = () => {
      return (
        <div
          class={"mx-[-15px] mt-[-20px]"}
          style={{
            backgroundColor: "#fff",
            boxShadow: "0px 2px 3px 1px rgba(0,0,0,0.03)",
          }}
        >
          <FilterMenuSearch choose={data} v-model={form} searchKey="title" />
        </div>
      );
    };
    const render2 = () => {
      return (
        <ListView
          {...getUserInfoUrl(
            {
              dh: "/api/H5/richMeansOfAgriculturalProduction/large/history",
              xh: "/api/H5/richMeansOfAgriculturalProduction/small/history",
            },
            form
          )}
          type="page"
          renderItem={renderItem}
        />
      );
    };
    return () => (
      <PageTitle
        title={"代购记录"}
        bgColor={"white"}
        childClass={"p-14 pt-20 pb-20 bg-[#FFFFFF]"}
      >
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
